<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <link rel="stylesheet" href="../bootstrap-3.3.4/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../Flat-UI-master/dist/css/flat-ui.min.css"/>
    <script src="../bootstrap-3.3.4/dist/js/jquery-1.11.3.min.js"></script>
    <script src="../bootstrap-3.3.4/dist/js/bootstrap.min.js"></script>
    <script src="../Flat-UI-master/dist/js/flat-ui.min.js"></script>
    <title></title>
    <style>
       .row{
           margin-top: 20px;;
        }
        .center{
            text-align: center;
        }
        .pagination{
            background: #cccccc;
        }
    </style>
    <script>
        $(function(){
            $('#myTabs a').click(function (e) {
                $(this).tab('show')
            });
        })
    </script>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/jquerysession.js"></script>
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">这什么东西</span>
            </button>
            <a class="navbar-brand" href="Index.html">图书商城</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="Index.html">首页</a></li>
                <li><a href="Order.html">我的订单</a></li>
                <li><a href="UserInfo.html">个人中心</a></li>
                <li hidden><a href="FriendLink.html">友情链接</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a href="Login.html">登录</a></li>
                <li><a href="Register.html">注册</a></li>
                <li><a id="out">退出</a></li>
                <li>
                    <a href="Cart.html"><span class="glyphicon glyphicon-shopping-cart">购物车</span></a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>
<!--content-->
<div class="container">
    <div class="jumbotron">
        <h1>图书商城</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
    </div>

    <ul class="nav nav-tabs" id="myTabs">
        <!--class="active"-->
        <!--<li class="active" id="myli"><a>1111</a></li>-->
    </ul>
    <div class="row">
        <!--<div class="col-sm-4 col-md-3">-->
            <!--<div class="thumbnail" >-->
                <!--<a href="BookInfo.html">-->
                    <!--<img style="width: 100%; height: 200px; display: block;" alt="100%x200" src="" data-holder-rendered="true">-->
                <!--</a>-->
                <!--<div class="caption center">-->
                    <!--<h3>书名</h3>-->
                    <!--<p><span>价格:</span><span>100.00</span></p>-->
                    <!--<p><a class="btn btn-primary btn-block" role="button" href="BookInfo.html">查看详情</a></p>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>


    <nav class="center">
        <ul class="pagination  pagination-lg">
            <li id="firstpage">
                <a aria-label="Previous">
                    <span aria-hidden="true">首页</span>
                </a>
            </li>
            <!--class="active"-->
            <li class="li"><a id="page1">1</a></li>
            <li class="li"><a id="page2">2</a></li>
            <li class="li"><a id="page3">3</a></li>
            <li class="li"><a id="page4">4</a></li>
            <li class="li"><a id="page5">5</a></li>
            <li id="lastpage">
                <a aria-label="Next">
                    <span aria-hidden="true">末页</span>
                </a>
            </li>
        </ul>
    </nav>

</div>

<!--footer-->
<div class="navbar navbar-default navbar-static-bottom">
版权声明区
</div>
<script>
    function getUrlParameter(name){
        name = name.replace(/[]/,"\[").replace(/[]/,"\[").replace(/[]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec(window.parent.location.href );
        if( results == null ) return ""; else {
            return results[1];
        }
    };
    var username=getUrlParameter('uesrname');
    var cid=1;
    var catepage = 1;
    var maxpage = 1;
    window.onload=function () {
        // var id = $.session.get('id');
        // console.log($.session.get('id'));
        // console.log(id);
        // console.log($.session);

        $.ajax({
            url:"/index",
            type:"get",
            success:function (re) {
                console.log(re);
                console.log(re.category[0]);
                var i;
                for(i=0;i<re.category.length;i++){
                    console.log(re.category[i].cname);
                    $("<li class='cate' name='"+re.category[i].cid+"'><a>"+re.category[i].cname+"</a></li>")
                        .appendTo("#myTabs")
                }
            }
        })
    }
    $("#myTabs").on("click","li",function () {
        $(".cate").removeClass("active");
        $(this).addClass("active");
        cid = $(this).attr('name');
        console.log(cid);
        $.ajax({
            url:"/bookbycid",
            type:"get",
            data:{
                cid:cid,
                catepage:catepage
            },
            success:function (re) {
                console.log(re);
                maxpage = re.maxpage;
                $(".row").empty();
                for (var i = 0; i < re.data.length; i++) {
                    $("<div class=\"col-sm-4 col-md-3\">\n" +
                        "            <div class=\"thumbnail\" >\n" +
                        "                <a href=\"BookInfo.html\">\n" +
                        "                    <img style=\"width: 100%; height: 200px; display: block;\" alt=\"100%x200\" src=\""+re.data[i].image+"\" data-holder-rendered=\"true\">\n" +
                        "                </a>\n" +
                        "                <div class=\"caption center\">\n" +
                        "                    <h3>"+re.data[i].bname+"</h3>\n" +
                        "                    <p><span>价格:</span><span>"+re.data[i].price+"</span></p>\n" +
                        "                    <p><a class=\"btn btn-primary btn-block\" role=\"button\" href=\"BookInfo.html?bid="+re.data[i].bid+"\">查看详情</a></p>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "        </div>")
                        .appendTo(".row")
                }
            }
        })
    });
    $(".li").click(function () {
        // console.log($(this).children("a").html());
        $(this).removeClass("active");
        page=$(this).children("a").html();
        if (page > maxpage) {
            page=maxpage
        }
        $.ajax({
            url:"/bookbycid",
            type:"get",
            data:{
                cid:cid,
                catepage:page
            },
            success:function (re) {
                console.log(re);
                maxpage = re.maxpage;
                $(".row").empty();
                for (var i = 0; i < re.data.length; i++) {
                    $("<div class=\"col-sm-4 col-md-3\">\n" +
                        "            <div class=\"thumbnail\" >\n" +
                        "                <a href=\"BookInfo.html\">\n" +
                        "                    <img style=\"width: 100%; height: 200px; display: block;\" alt=\"100%x200\" src=\""+re.data[i].image+"\" data-holder-rendered=\"true\">\n" +
                        "                </a>\n" +
                        "                <div class=\"caption center\">\n" +
                        "                    <h3>"+re.data[i].bname+"</h3>\n" +
                        "                    <p><span>价格:</span><span>"+re.data[i].price+"</span></p>\n" +
                        "                    <p><a class=\"btn btn-primary btn-block\" role=\"button\" href=\"BookInfo.html?bid="+re.data[i].bid+"\">查看详情</a></p>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "        </div>")
                        .appendTo(".row")
                }
                $("#page1").empty();
                $("#page2").empty();
                $("#page3").empty();
                $("#page4").empty();
                $("#page5").empty();
                if (page > 4) {
                    $("#page3").html(page);
                    $("#page2").html(page-1);
                    $("#page1").html(page-2);
                    $("#page4").html(page+1);
                    $("#page5").html(page+2);
                    $("#page3").parents().addClass("active");
                }else {
                    $("#page1").html(1);
                    $("#page2").html(2);
                    $("#page3").html(3);
                    $("#page4").html(4);
                    $("#page5").html(5);
                    if (page == 1) {
                        $("#page1").parents().addClass("active");
                        // console.log($("#page1").parents().html());
                    }else if (page == 2) {
                        $("#page2").parents().addClass("active");
                    }else if (page == 3) {
                        $("#page3").parents().addClass("active");
                    }
                }
            }
        })
    });
    $("#firstpage").click(function () {
        page=1;
        $(".li").removeClass("active");
        $.ajax({
            url:"/bookbycid",
            type:"get",
            data:{
                cid:cid,
                catepage:catepage
            },
            success:function (re) {
                console.log(re);
                maxpage = re.maxpage;
                $(".row").empty();
                for (var i = 0; i < re.data.length; i++) {
                    $("<div class=\"col-sm-4 col-md-3\">\n" +
                        "            <div class=\"thumbnail\" >\n" +
                        "                <a href=\"BookInfo.html\">\n" +
                        "                    <img style=\"width: 100%; height: 200px; display: block;\" alt=\"100%x200\" src=\""+re.data[i].image+"\" data-holder-rendered=\"true\">\n" +
                        "                </a>\n" +
                        "                <div class=\"caption center\">\n" +
                        "                    <h3>"+re.data[i].bname+"</h3>\n" +
                        "                    <p><span>价格:</span><span>"+re.data[i].price+"</span></p>\n" +
                        "                    <p><a class=\"btn btn-primary btn-block\" role=\"button\" href=\"BookInfo.html?bid="+re.data[i].bid+"\">查看详情</a></p>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "        </div>")
                        .appendTo(".row")
                }
                $("#page1").empty();
                $("#page2").empty();
                $("#page3").empty();
                $("#page4").empty();
                $("#page5").empty();
                if (page > 4) {
                    $("#page3").html(page);
                    $("#page2").html(page-1);
                    $("#page1").html(page-2);
                    $("#page4").html(page+1);
                    $("#page5").html(page+2);
                    $("#page3").parents().addClass("active");
                }else {
                    $("#page1").html(1);
                    $("#page2").html(2);
                    $("#page3").html(3);
                    $("#page4").html(4);
                    $("#page5").html(5);
                    if (page == 1) {
                        $("#page1").parents().addClass("active");
                        // console.log($("#page1").parents().html());
                    }else if (page == 2) {
                        $("#page2").parents().addClass("active");
                    }else if (page == 3) {
                        $("#page3").parents().addClass("active");
                    }
                }
            }
        })
    })
    $("#lastpage").click(function () {
        page=maxpage;
        $(".li").removeClass("active");
        $.ajax({
            url:"/bookbycid",
            type:"get",
            data:{
                cid:cid,
                catepage:catepage
            },
            success:function (re) {
                console.log(re);
                maxpage = re.maxpage;
                $(".row").empty();
                for (var i = 0; i < re.data.length; i++) {
                    $("<div class=\"col-sm-4 col-md-3\">\n" +
                        "            <div class=\"thumbnail\" >\n" +
                        "                <a href=\"BookInfo.html\">\n" +
                        "                    <img style=\"width: 100%; height: 200px; display: block;\" alt=\"100%x200\" src=\""+re.data[i].image+"\" data-holder-rendered=\"true\">\n" +
                        "                </a>\n" +
                        "                <div class=\"caption center\">\n" +
                        "                    <h3>"+re.data[i].bname+"</h3>\n" +
                        "                    <p><span>价格:</span><span>"+re.data[i].price+"</span></p>\n" +
                        "                    <p><a class=\"btn btn-primary btn-block\" role=\"button\" href=\"BookInfo.html?bid="+re.data[i].bid+"\">查看详情</a></p>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "        </div>")
                        .appendTo(".row")
                }
                $("#page1").empty();
                $("#page2").empty();
                $("#page3").empty();
                $("#page4").empty();
                $("#page5").empty();
                if (page > 4) {
                    $("#page3").html(page);
                    $("#page2").html(page-1);
                    $("#page1").html(page-2);
                    $("#page4").html(page+1);
                    $("#page5").html(page+2);
                    $("#page3").parents().addClass("active");
                }else {
                    $("#page1").html(1);
                    $("#page2").html(2);
                    $("#page3").html(3);
                    $("#page4").html(4);
                    $("#page5").html(5);
                    if (page == 1) {
                        $("#page1").parents().addClass("active");
                        // console.log($("#page1").parents().html());
                    }else if (page == 2) {
                        $("#page2").parents().addClass("active");
                    }else if (page == 3) {
                        $("#page3").parents().addClass("active");
                    }
                }
            }
        })
    })
    $("#out").click(function () {
        $.ajax({
            url:"/out",
            type:"get",
            success:function (re) {
                if (re.code == 1000) {
                    location.href="/Home/Login.html"
                }
            }
        })
    })
</script>
</body>
</html>